<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>


<script>
    //3.没有块级作用域引起的问题     for的块级作用域
    //   var btns = document.getElementsByTagName('button')
    //   for(var i = 0; i<btns.length; i++){
    //       btns[i].addEventListener('click' , function () {
    //           console.log('第' + i + '个按钮被点击');
    //       })
    // }
    //i没有作用域，且javascript是先执行的，在function执行的时候是调用的外面的i，但此时外面的i已经循环到了.length
    //所以每次调用的结果相同


    //ES5使用闭包函数来解决问题
    // var btns = document.getElementsByTagName('button')
    // for(var i = 0; i<btns.length; i++){
    //     (function (i) {
    //         btns[i].addEventListener('click' , function () {
    //             console.log('第' + i + '个按钮被点击');
    //         })
    //     })(i)
    // }
    //为什么使用闭包可以解决这个问题？
    //因为函数是一个作用域
    //for循环中的i在执行的时候会被传到第35行
    //第35行的（i）表示以i为变量来执行上面31行的function
    //此时即使外部的i改变，但每一个i都有自己单独的作用域，所以并不随着for的改变而改变



    //使用ES6的语法来解决问题
    const btns = document.getElementsByTagName('button')
    for(let i=0 ; i < btns.length; i++){
        btns[i].addEventListener('click',function () {
            console.log('第' + i + '个按钮被点击');
        })
    }





</script>


</body>
</html>